import React, { Component } from 'react'
import Swiper from 'swiper/swiper-bundle.min.js'
import "swiper/swiper-bundle.min.css"
import './home.css'

export default class Home extends Component {
    componentDidMount() {
        new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 10,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    }
    render() {
        return (
            <div style={{width:"100%",height:"100%", backgroundImage: "url(imgs/13.jpg)" }}>
                <h2 style={{textAlign:'center',marginBottom:'30px'}}>如 若 初 见 工 作 室 </h2>
                <div style={{ width: '100%', height: '100%' }}>
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/12.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/2.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/5.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/4.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/6.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/10.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/7.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/3.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/9.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/1.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/8.jpg)" }}></div>
                            <div className="swiper-slide" style={{ backgroundImage: "url(imgs/10.jpg)" }}></div>
                        </div>
                        <div className="swiper-pagination" ></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        )
    }
}
